<template>
  <div :class="['section', 'set_info']">
    <div class="form">
      <p class="label">填写囍宴主人信息</p>
      <div class="info">
        <div class="item">
          <span>真实姓名</span>
          <input v-model="name" type="text">
        </div>
        <div class="item">
          <span>联系电话</span>
          <input v-model="phone" type="text" maxlength="11">
        </div>
        <div class="item">
          <span>囍宴举办地点</span>
          <input v-model="place" type="text">
        </div>
        <div class="item">
          <span>囍宴举办日期</span>
          <input v-model="date" type="date">
        </div>
      </div>
      <p class="text">
        只有于2016年1月1日后进行婚姻登记<br>
        并在2016年10月1日——10月7日举办婚宴的新人<br>
        （限广东省、海南省区域）才能入榜噢！
      </p>
      <div class="btn" @click="submit">
        <img src="../assets/images/button_bg.png">
        <p>提交</p>
      </div>
    </div>
    <home></home>
    <dialogs ref="dialogs"
             :msg="currentDialogs.msg ? currentDialogs.msg.replace(
                  '{{masterName}}', $refs.feast ? $refs.feast.masterFeast.name : '') : ''"
             :btns="currentDialogs.btns">
    </dialogs>
  </div>
</template>

<script>
  import dialogs from "@/components/dialogs";
  import home from "@/components/home";

  export default {
    name: 'setInfo',
    data: function () {
      return {
        name: "",
        phone: "",
        place: "",
        date: "",
        currentDialogs: {},
        dialogs: {
          illegal: {
            msg: '<br>输入信息不合法！<br>',
            btns: [
              {
                value: '重新输入',
                href: 'close'
              }
            ]
          },
          succeed: {
            msg: '<br>提交成功！<br>',
            btns: [
              {
                value: '查看我的排名',
                href: '/join_rank/ranklist'
              }
            ]
          },
          failed: {
            msg: '<br>提交失败！<br>',
            btns: [
              {
                value: '重新输入',
                href: 'close'
              }
            ]
          }
        }
      }
    },
    components: {
      dialogs,
      home
    },
    methods: {
      submit: function () {
        if (this.name.length > 1
          && this.phone.length === 11
          && /^1[3568]\d{9}$/.test(this.phone)
          && this.place.length > 5) {
          this.$set(this, 'currentDialogs', this.dialogs.succeed);
          this.$set(this.$refs.dialogs, 'isShow', true);
        } else {
          this.$set(this, 'currentDialogs', this.dialogs.illegal);
          this.$set(this.$refs.dialogs, 'isShow', true);
        }
      }
    }
  }
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .set_info {
    text-align: center;

    .form {
      position: absolute;
      left: setRem(56px);
      right: setRem(56px);
      top: 50%;
      transform: translateY(-60%);

      .label {
        font-size: setRem(28px);
      }

      .info {
        margin: setRem(42px) 0 setRem(24px);

        .item {
          border-radius: setRem(8px);
          background-color: #e7c598;
          text-align: left;
          font-size: 0;
          margin: setRem(14px) setRem(45px);

          &::after {
            content: "";
            display: block;
            clear: both;
          }

          span, input {
            font-size: setRem(20px);
            float: left;
            color: #bf0c21;
            padding: setRem(6px) setRem(16px);
            box-sizing: border-box;
            width: 50%;
          }

          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          input {
            appearance: none;
            border: none;
            background-color: transparent;
            border-left: 1px solid #bf0c21;
          }
        }
      }

      .input_text {
        margin: setRem(28px) auto setRem(45px);
        appearance: none;
        border: none;
        padding: setRem(8px) setRem(16px);
        border-radius: setRem(8px);
        background-color: #e7c598;
        color: #bf0c21;
        width: setRem(280px);
        text-align: center;
        font-size: setRem(24px);
      }

      .text {
        font-size: setRem(18px);
        line-height: setRem(28px);
        margin-bottom: setRem(26px);
      }
    }
  }
</style>
